<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ztree演示</title>
    <link rel="stylesheet" href="plugins/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="plugins/ztree/js/jquery-1.4.4.min.js"></script>
    <script src="plugins/ztree/js/jquery.ztree.all-3.5.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
        var zTreeObj;  // 树形对象
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            // 开启简单json数据格式
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            check: {
                enable: true  //开启复选框
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
       /* var zNodes = [   //标准json数据格式
            {name:"test1", open:true, children:[
                    {name:"test1_1"}, {name:"test1_2"}]},
            {name:"test2", open:true, children:[
                    {name:"test2_1"}, {name:"test2_2",children:[{name:"test2_2_1"},{name:"test2_2_2"}]}]}
        ];*/
        var zNodes = [   //简单json数据格式
            {id:"1",name:"test1","checked":"true",pId:"0"},
            {id:"2",name:"test2",pId:"0"},
            {id:"11",name:"test1_1",pId:"1"},
            {id:"12",name:"test1_2", "checked":"true", pId:"1"},
            {id:"21",name:"test2_1",pId:"2"},
            {id:"22",name:"test2_2",pId:"2"},
            {id:"221",name:"test2_2_1",pId:"22"},
            {id:"222",name:"test2_2_2",pId:"22"}
        ];
        $(document).ready(function(){
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTreeObj.expandAll(true);  //展开所有节点的方法
        });

        function save() {
            let idsStr='';
            var nodes = zTreeObj.getCheckedNodes(true);
            for (let i = 0; i < nodes.length; i++) {
                if(i==nodes.length-1){
                    idsStr+=nodes[i].id;
                }else{
                    idsStr+=nodes[i].id+",";
                }

            }
            alert(idsStr);
        }
    </SCRIPT>
</HEAD>
<BODY>
<div>
    <button onclick="save()">保存</button>
    <ul id="treeDemo" class="ztree"></ul>
</div>
</BODY>
</HTML>